(() => {
  Vue.component('overlay-loading', {
    props: ['loading'],
    template: `<div v-if="loading" class="dialog-mask">
      <span style="color:#fff;font-size:28px;text-shadow:1px 1px 1px #000;font-weight:bold;display:inline-block;margin-right:16px;">正在合并</span>
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>`
  });

  Vue.component('prompt-dialog', {
    props: ['show', 'msg'],
    model: {
      prop: 'show',
      event: 'change'
    },
    data() {
      return {
        name: ''
      };
    },
    template: `<div v-if="show" class="dialog-mask">
      <div class="alert-dialog dialog-container">
        <div class="dialog-header">
          <h3>{{msg}}</h3>
        </div>
        <div class="dialog-body">
          <input type="text" style="box-sizing: border-box;width: 380px;border: 1px solid #ccc;padding:4px;" v-model="name">
        </div>
        <div class="dialog-footer">
          <button @click="$emit('change', false);action(false);" class="dialog-btn btn-grey">取消</button>
          <button @click="$emit('change', false);action(true);" style="margin-left: 8px;" class="dialog-btn">确定</button>
        </div>
      </div>
    </div>`,
    methods: {
      action(confirm) {
        this.$emit('action', confirm ? this.name : false);
      }
    }
  });

  new Vue({
    el: '#container',
    data() {
      return {
        flvs: [],
        drag: false,
        mergedBlob: null,
        saveDailogShow: false,
        loading: false
      };
    },
    methods: {
      setFlvs() {
        setTimeout(() => {
          const fileInput = document.getElementById('fileChooser');
          this.flvs = [];
          for (let i = 0; i < fileInput.files.length; i++) {
            this.flvs.push({ name: fileInput.files[i].name, file: fileInput.files[i] });
          }
        }, 100);
      },
      async mergeFlvs(name) {
        if (!name) {
          return;
        }
        this.loading = true;
        this.mergedBlob = await FLV.mergeBlobs(this.flvs.map(flv => flv.file));
        setTimeout(() => {
          this.loading = false;
          this.downloadMerged(name);
        }, 3000);
      },
      downloadMerged(name) {
        const a = document.createElement('a');
        a.download = name + '.flv';
        a.href = URL.createObjectURL(this.mergedBlob);
        document.body.appendChild(a);
        const evt = new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
        });
        a.dispatchEvent(evt);
        setTimeout(() => {
          document.body.removeChild(a);
        }, 1000);
      }
    }
  });
})();
